<template>
  <div class="app-container">
    <el-card class="operate-container" shadow="never">
      <i class="el-icon-tickets" />
      <span>数据列表</span>
      <el-button style="float:right;margin-right: 5px" size="small" @click="handleRefreshList()">刷新</el-button>
    </el-card>
    <div class="table-container">
      <el-table ref="orderTable" v-loading="listLoading" :data="list" style="width: 100%;" border>
        <el-table-column prop="operLoginName" label="操作员" align="center"></el-table-column>
        <el-table-column prop="operName" label="姓名" align="center"></el-table-column>
        <el-table-column prop="comName" label="公司名" align="center"></el-table-column>
        <el-table-column prop="createTime" label="操作时间" align="center"></el-table-column>
        <el-table-column prop="operContent" label="内容" align="center"></el-table-column>
      </el-table>
    </div>
    <div class="pagination-container">
      <el-pagination
        background
        layout="total, sizes,prev, pager, next,jumper"
        :current-page.sync="listQuery.current"
        :page-size="listQuery.size"
        :page-sizes="[5,10,20,30,50]"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>
<script>
import * as api from '@/api/home'

const defaultListQuery = {
  current: 1,
  size: 10,
  messageType: 1
}
export default {
  name: 'home-dynamic',
  data() {
    return {
      listQuery: Object.assign({}, defaultListQuery),
      listLoading: false,
      list: null,
      total: null,
      operateType: null,
      operateOptions: [],
      logisticsDialogVisible: false
    }
  },
  created() {
    this.getList()
  },
  methods: {
    handleRefreshList() {
      this.getList()
    },
    handleSizeChange(val) {
      this.listQuery.current = 1
      this.listQuery.size = val
      this.getList()
    },
    handleCurrentChange(val) {
      this.listQuery.current = val
      this.getList()
    },
    getList() {
      this.listLoading = true
      api
        .getSysOper(this.listQuery)
        .then(response => {
          this.listLoading = false
          this.list = response.data.page.records
          this.total = response.data.page.total
        })
        .catch(() => {
          this.listLoading = false
        })
    }
  }
}
</script>
<style scoped>
</style>
